<!--
  折叠动画（收起展开按钮在底部，针对所有内容）：        zls-2021/06/06
      Attributes
          1、height         显示内容高度（默认为150）
          2、show           是否显示内置控制按钮（默认true）
          3、downText       收起的文本（默认为'收起'）
          4、upText         展开的文本（默认为'展开'）

      slot

      Demo==>
          <z-fold :height="100">
            <div style="height: 50px; background-color: aqua"></div>
            <div style="height: 50px; line-height: 50px; background-color: lightblue">数据一</div>
            <div style="height: 50px; background-color: lightseagreen"></div>
            <div style="height: 50px; line-height: 50px; background-color: lightblue">数据二</div>
            <div style="height: 50px; background-color: aquamarine"></div>
            <div style="height: 50px; line-height: 50px; background-color: lightblue">数据三</div>
          </z-fold>
-->
<template>
  <div class="z-fold">
    <div class="collapse" :style="{ height: pxToRem(containerH) }">
      <div ref="content">
        <slot></slot>
      </div>
    </div>
    <div v-if="show && controllVisible" class="collapse-controll" @click="handleControll">
      {{ isShow ? downText : upText }}
    </div>
  </div>
</template>

<script>
export default { name: 'z-fold' }
</script>
<script setup>
import { onMounted, ref } from 'vue'
import { pxToRem } from '@/utils'

const props = defineProps({
  height: {
    type: Number,
    default: 150
  },
  show: {
    type: Boolean,
    default: true
  },
  downText: {
    type: String,
    default: '收起'
  },
  upText: {
    type: String,
    default: '展开'
  }
})
const isShow = ref(false) // 是否为展开状态（默认为收起状态）
const controllVisible = ref(true) // 控制按钮的显示隐藏（默认显示控制按钮）
const containerH = ref(props.height) // 整个内容区的高度（默认为开发者传过来的默认高度）
const content = ref()

onMounted(() => {
  init()
})

function init() {
  /**
   * 当内容变化的同时也是展开状态的话，那么需要更新容器高度
   *    1. 当最新的内容高度大于默认高度时，则把容器高度更新最新内容高度一致即可
   *    2. 反之，把容器高度设到最小（即默认高度），同时设为收起状态
   */
  let contentH = content.value.offsetHeight
  if (isShow.value) {
    if (contentH > props.height) {
      containerH.value = contentH.value
    } else {
      containerH.value = props.height
      isShow.value = false
    }
  }
  controllVisible.value = contentH > props.height // 控制按钮的显示隐藏
}

function handleControll() {
  isShow.value ? fold() : unfold()
}

// 收起
function fold() {
  containerH.value = props.height
  isShow.value = false
}

// 展开
function unfold() {
  let contentH = content.value.offsetHeight
  if (contentH > props.height) {
    containerH.value = contentH
  } else {
    containerH.value = props.height
  }
  isShow.value = true
}
</script>

<style lang="scss" scoped>
.z-fold {
  width: 100%;
}
.collapse {
  overflow: hidden;
  transition: height 0.3s;
}
.collapse-controll {
  font-size: 14px;
  font-weight: 400;
  color: $color1;
  height: 30px;
  line-height: 30px;
  text-align: center;
}
</style>
